<template>
    <div class="main-body">
        <comm-header title="Banner管理"></comm-header>
        <div class="circle-box">
            <el-form class="comm-row search-form" :inline="true" ref="searchForm" :model="searchForm">
                <el-form-item>
                    <el-button icon="el-icon-plus" @click="openDialog">添加</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table
                stripe
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{background:'#F5F5F5',height:'55px'}"
            >
                <el-table-column label="图片" prop="imgUrl">
                    <template v-slot="{row}">
                        <img :src="row.imgUrl"  class="table-img"/>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="位置" prop="position">
                    <template v-slot="{row}">
                        <span v-if="row.position ===1">首页banner</span>
                        <span v-else-if="row.position ===2">信息页底部</span>
                    </template>
                </el-table-column>
                <el-table-column label="链接类型" prop="linkType">
                    <template v-slot="{row}">
                        <span v-if="row.position ===1">内部链接</span>
                        <span v-else-if="row.position ===2">外链</span>
                    </template>
                </el-table-column>
                <el-table-column label="外链地址" prop="linkUrl"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{row}">
                        <el-button type="text" @click="handleDel(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加Banner -->
        <el-dialog
            title="添加Banner"
            width="30%"
            class="inner-dialog friend-dialog"
            :visible.sync="dialogVisible"
            append-to-body
        >
            <div class="dialog-box">
                <el-form  ref="addForm" :model="addForm" :rules="rules" label-width="140px">
                    <el-form-item label="名称" prop="name">
                        <el-input placeholder="请输入名称" v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="showImgUrl">
                        <div class="upload-box">
                            <div v-if="addForm.showImgUrl !==''" class="img-item">
                                <img :src="addForm.showImgUrl" class="upload-img" />
                            </div>
                            <div class="file" >
                                <i class="el-icon-plus" style="font-size:32px;font-weight:550" />
                                <input type="file" id="photo" @change="chooseImgVideo($event,1)"  accept="image/*"  />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="位置" prop="position">
                        <el-select v-model="addForm.position" clearable placeholder="请选择">
                            <el-option
                                v-for="item in positionOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否跳转" prop="skip">
                         <el-radio-group v-model="addForm.skip">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="链接类型" prop="linkType">
                        <el-radio-group v-model="addForm.linkType">
                            <el-radio :label="1">内部链接</el-radio>
                            <el-radio :label="2">外链</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="addForm.linkType ===2" label="外链地址" prop="linkUrl">
                        <el-input placeholder="请输入外链地址" v-model="addForm.linkUrl"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button :loading="loading" @click="handleSub" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import CommHeader from "@/components/goods/CommHeader.vue";
import {get,post} from "@/utils/request";
import {isOverSize} from "@/utils/validate";
export default {
    components: {
        CommHeader,
    },
    data(){
        return{
            searchForm:{
                page: 1,
                size: 10,
                name:'',
            },
            dialogVisible:false,
            tableData:[],
            addForm:{
                name:'',
                imgUrl:'',
                showImgUrl:'',
                position:'',
                skip:0,
                linkType:1,
                linkUrl:'',
            },
            positionOption:[
                {
                    value:1,
                    label:'首页banner'
                },
                {
                    value:2,
                    label:'信息页底部'
                }
            ],
            rules:{
                name: [
                    {
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    }
                ],
                imgUrl:[
                    {
                        required: true,
                        message: '请上传图片',
                        trigger: 'change'
                    }
                ],
                position:[
                    {
                        required: true,
                        message: '请选择位置',
                        trigger: 'change'
                    }
                ],
                skip:[
                    {
                        required: true,
                        message: '请选择是否跳转',
                        trigger: 'change'
                    }
                ],
                linkType:[
                    {
                        required: true,
                        message: '请选择链接类型',
                        trigger: 'change'
                    }
                ],
                linkUrl:[
                     {
                        required: true,
                        message: '请输入外链地址',
                        trigger: 'blur'
                    }
                ]
            },
            loading:false,
            gHost:'https://plaza.juke1.xyz'
        }
    },

    created(){
        this.getList();
    },

    methods:{
         /**
         * 列表
         */
        getList(num){
            if(num){
                this.searchForm.page=1;
                this.searchForm.size=10;
            }
            get("/banner/get",this.searchForm).then((response)=>{
                if(response.code ==0){
                    this.tableData=response.data.map((v)=>{
                        v.imgUrl = this.gHost + v.imgUrl;
                        return v;
                    });
                }else{
                    this.$message.error(response.message);
                }
            })
        },

        /**
         * 打开弹窗
         */
        openDialog(){
            this.dialogVisible=true;
            this.$nextTick(()=>{
                this.$refs.addForm.resetFields();
                this.$refs.addForm.clearValidate();
            })
        },

        /**
         * 上传图片或视频
         */
        chooseImgVideo(event){
            console.log(event)
            var file=event.currentTarget.files[0];
            var formData = new FormData();
            formData.append('image', file);
            if(isOverSize(file.size,2)){
                this.$message.warning("图片大小不能超过2MB");
                return;
            }

            post("/common/upload_img",formData).then((response)=>{
                if(response.code ==0){
                    this.addForm.imgUrl= response.data;
                    this.addForm.showImgUrl=this.gHost + response.data;
                }else{
                    this.$message.error(response.message);
                }
            })
        },

        /**
         * 添加
         */
        handleSub(){
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    this.loading=true;
                    post("/banner/save",this.addForm).then((response)=>{
                        if(response.code ==0){
                            this.$message.success('操作成功');
                            this.getList();
                        }else{
                            this.$message.error(response.message);
                        }
                        this.loading=false;
                        this.dialogVisible=false;
                    })
                }
            })
           
        },

        /**
         * 删除
         */
        handleDel(row){
            get("/banner/remove",{
                id:row.id
            }).then((response)=>{
                if(response.code ==0){
                    this.$message.success('操作成功');
                    this.getList();
                }else{
                    this.$message.error(response.message);
                }
            })
        }

           
    }
}
</script>

<style lang="scss" scoped>
@import "@/styles/main.scss";
.circle-box {
    padding: 0 30px;
    .search-form {
        display: flex;
        flex-flow: wrap;
        padding: 30px 0 20px 0;
    }
}
.dialog-box {
  padding-right: 100px;
}
.table-img{
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.upload-img{
    width: 120px!important;
    height: 120px!important;
    object-fit: cover;
}
</style>